<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  value: [String, Boolean, Number],
  /**
   * 关于Radio的属性都写在此数组的对象中
   * 增加一个text属性，用于显示插槽内容，不填就是label作为单选项显示的文本
   * 去掉radio的input事件，以el-radio-group的形式使用，就不再需要radio的input了
   */ 
  options: Array,
  valueFiled: {
    type: String,
    default: 'value',
  },
  labelFiled: {
    type: String,
    default: 'label',
  },
  input: {
    type: Function,
    default: () => {}
  },
  // 单选框类型 可选值 radio | button
  radioType: {
    type: String,
    default: 'radio'
  }
})

const radio = ref(props.value)
watch(() => props.value, newVal => {
  radio.value = newVal
})
const emit = defineEmits(['input'])
emit('input', radio)
</script>

<template>
  <el-radio-group v-model="radio" v-bind="$attrs" @input="input">
    <template v-if="radioType === 'radio'">
      <el-radio v-for="radio in options" :key="radio[valueFiled]" :label="radio[valueFiled]" v-bind="radio">{{ radio[labelFiled] }}</el-radio>
    </template>
    <template v-if="radioType === 'button'">
      <el-radio-button v-for="radio in options" :key="radio[valueFiled]" :label="radio[valueFiled]" v-bind="radio">{{ radio[labelFiled] }}</el-radio-button>
    </template>
  </el-radio-group>
</template>

<style lang="scss" scoped></style>
